<template>
    <div>
         <li>
            <label>
              <!-- change 改变 -->
                <input type="checkbox" v-model="todo.done" @click="handleCheck(todo.id)" />
                <span>{{todo.titio}}</span>
            </label>
            <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
        </li>
    </div>
</template>

<script>
export default {
  name: "RowLi",
  data() {
    return {};
  },
  methods: {
    handleCheck(id) {
      this.checkTod(id);
    },
    handleDelete(id) {
      if(confirm("确定删除吗"))this.removeBtn(id);
     
    }
  },
  props: {
    todo: {
      //type: Object,
      required: true //item 是必要的
    },
    checkTod: {
      required: true //item 是必要的
    },
    removeBtn: {
      required: true //item 是必要的
    }
  },
  watch: {}
};
</script>

<style lang="css" scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
  user-select: none;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  margin-top: 3px;
  display: none;
}
li:hover {
  background: #ddd;
}
li:hover button {
  display: block;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>